<style scoped lang="less">
  .container {
    text-align: left;
  }

  .btn-wrap {
    padding: 2vh 0;
    text-align: center;
  }

  .van-button {
    padding: 0 10vw;
  }
</style>
<template>
  <div class="container">
    <van-cell-group title="打分">
      <van-cell value="打分">
        <van-rate v-model="rate"/>

      </van-cell>
    </van-cell-group>
    <van-cell-group title="评价内容">
      <van-field
        v-model="content"
        rows="4"
        autosize
        type="textarea"
        maxlength="200"
        placeholder="请输入评价内容"
        show-word-limit
      />
    </van-cell-group>
    <van-cell-group title="图片">
      <van-cell value="图片">
        <upload :max-count="9" v-model="imgList"></upload>
      </van-cell>
    </van-cell-group>
    <div class="btn-wrap">
      <van-button @click="toSubmit" type="primary" :loading="loading">提交</van-button>
    </div>
  </div>
</template>
<script>
  import {pub} from '@/api/comment'
  import {isNull} from '@/libs/util'
  import upload from '@/components/common/Upload.vue'
  import Vue from 'vue';
  import {Rate, Field, CellGroup, Cell, Button, Dialog, Toast} from 'vant';

  Vue.use(Rate).use(Field).use(CellGroup).use(Cell).use(Button).use(Toast);
  export default {
    name: 'comment',
    components: {
      upload
    },
    data() {
      return {
        loading: false,
        order_id: null,
        content: '',
        imgList: [],
        rate: 0
      }
    },
    created() {
      this.order_id = this.$route.params.order_id
    },
    methods: {
      toSubmit() {
        if (this.rate === 0) {
          Toast('请评分');
          return;
        }
        if (isNull(this.content)) {
          Toast('请输入评价内容');
          return;
        }
        Dialog.confirm({
          title: '提示',
          message: '确认提交吗？'
        }).then(() => {
          this.submit();
        }).catch(() => {
          // on cancel
        });
      },
      submit() {
        this.loading = true;
        let imgs = [];
        this.imgList.forEach(v=>{
          imgs.push(v.name);
        });
        pub({imgs: imgs, content: this.content, order_id: this.order_id, rate: this.rate}).then(rep => {
          Toast({
            type: 'success',
            message: '提交成功',
            onClose: () => {
              window.history.go(-1);
            }
          });

          this.loading = false;
        }, error => {
          this.loading = false;
        })
      }
    }
  }
</script>